'use client'
import FloatingBubble from './FloatingBubble';
import { DemoList, GlobalContext } from "./GlobalContext";
import { useState, useEffect } from "react";
import { usePathname } from 'next/navigation';

export default ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  const [componentName, setComponentName] = useState("Cascader");

  const pathname = usePathname();

  useEffect(() => {
    setComponentName(pathname.split('/').slice(-1)[0])
  }, [pathname])

  return (
    <div className="min-h-full bg-[#f1f1f1] pb-20">
      <div className='sticky top-0 w-full bg-yellow-600 text-white text-center py-1 text-sm z-[100]'>当前预览组件：{componentName}</div>
      {children}
      <GlobalContext.Provider value={{ componentName, setComponentName }}>
        <FloatingBubble></FloatingBubble>
      </GlobalContext.Provider>
    </div>
  );
}
